@baseColor:#e92322;
html,body{
  max-width: 640px;
  min-width: 320px;
  margin: 0  auto;
}
.layout{
  max-width: 640px;
  height: 100%;
  background-color: #cccccc73;
  position: relative;
  /*京东头部*/
  .jd_header{
    z-index: 999;
    width: 100%;
    max-width: 640px;
    min-width: 320px;
    height: 40px;
    background-color: rgba(235,25,34,0);
    position: fixed;
    /*
    1.如果设置了left/right...值，它会参照视口
    2.如果没有设置，它会保留元素的原始位置
    */
    form{
      width: 100%;
      height: 100%;
      padding:0px 60px 0px 70px;
      >input{
        width: 100%;
        height: 30px;
        margin-top:5px;
        border-radius:30px;
        padding-left:30px;
      }
      &::before{
        content: "";
        width: 20px;
        height: 20px;
        position: absolute;
        top: 8px;
        left: 80px;
        background:url("../images/jd-sprites.png");
        background-size: 200px 200px ;
        background-position: -60px -107px;
      }
    }
    .jd_logo{
      width: 60px;
      height: 25px;
      position: absolute;
      left: 5px;
      top: 7px;
      background: url("../images/jd-sprites.png");
      background-size:200px 200px ;
      background-position: 0 -107px;
    }
    .jd_login{
      width: 60px;
      height: 100%;
      position: absolute;
      right: 0;
      top: 0;
      color: #fff;
      text-align: center;
      line-height: 40px;
    }

  }

  /*轮播图样式*/
  .jd_banner{
    width: 100%;
    position: relative;
    overflow: hidden;
    >ul:first-of-type{
      width: 800%;
      /*相对定位的定位参照是自身的原始位置--与fixed没有设置定位值一样*/
      position: relative;
      left: -100%;
      >li{
        width: 12.5%;
        float: left;
        >a{
          width: 100%;
          /*设置块级元素：与下面的不一样*/
          display: block;
          >img{
            width: 100%;
            /*清除基线*/
            display: block;
          }
        }
      }
    }
    >ul:last-of-type{
      width: 118px;
      position: absolute;
      bottom: 5px;
      left: 50%;
      transform: translate(-50%,0);
      >li{
        width: 6px;
        height: 6px;
        border-radius: 50%;
        border: 1px solid #fff;
        margin-left:10px;
        float: left;
        &.now{
          background-color: #fff;
        }
      }
      >li:first-of-type{
        margin-left: 0px;
      }
    }
  }
  
  /*导航样式*/
  .jd_nav{
    width: 100%;
    background-color: #fff;
    padding: 10px;
    ul {
      width: 100%;
      li{
        width: 25%;
        float: left;
        text-align: center;
        img{
          width: 40px;
        }
      }
      li:nth-last-of-type(-n + 4){
        margin-top:10px;
      }
    }
  }

  /*产品样式*/
  .jd_product{

    .jd_pro_box{
      margin-top: 10px;
      background-color: #fff;
      
      .jd_pro_tip{
        line-height: 30px;
         >h3{
           height: 30px;
           line-height: 30px;
           border-bottom: 1px solid #ccc;
           position: relative;
           padding-left: 25px;
           color: #666;
           &::before{
             content: '';
             width: 3px;
             height: 12px;
             background-color: @baseColor;
             position: absolute;
             left: 15px;
             top: 9px;
           }
         }
      }
      .jd_pro_content{

      }
      &.jd_sk{
        .jd_pro_tip{
             border-bottom: none;
          .left{
            float: left;
            .sk_clock{
              width: 16px;
              height: 20px;
              display: block;
              float: left;
              background: url("../uploads/seckill-icon.png");
              background-size: 16px 20px ;
            }
            .sk_text{
              float: left;
              color: @baseColor;
              font-size: 13px;
            }
            .sk_time{
              float: left;
              >span{
                background-color: #000;
                color: #fff;
                padding: 0px 3px;
              }
              >span:nth-of-type(3n){
                color: #000;
                background-color: transparent;
              }
            }
          }
          .right{
            float: right;
            text-align: center;
          }
        }
        .jd_pro_content{
             padding: 10px;
             ul{
                >li{
                  width: 33.33%;
                  float: left;
                  >a{
                    width: 100%;
                    display: block;
                    >img{
                      width: 60%;
                    }
                  }
                }
             }
        }
      }
      /*添加产品的公共样式*/
      .a_50{
        width: 50%;
        display: block;
        float: left;
        >img{
          width: 100%;
          display: block;
        }
      }
      .b_left{
        border-left:1px solid #ccc;
      }
      .b_right{
        border-right:1px solid #ccc;
      }
      .b_bottom{
        border-bottom:1px solid #ccc;
      }
    }
  }
  
}

